
<template>
  <div class="personal-info">
    <h2>个人信息</h2>
    <form>
      <div>
        <label for="name">姓名:</label>
        <input type="text" id="name" v-model="name" />
      </div>
      <div>
        <label for="age">年龄:</label>
        <input type="number" id="age" v-model="age" />
      </div>
      <div>
        <label for="gender">性别:</label>
        <select id="gender" v-model="gender">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div>
        <label for="phone">电话:</label>
        <input type="tel" id="phone" v-model="phone" />
      </div>
      <button type="button" @click.prevent="updateInfo">更改</button>
      <button type="button" @click.prevent="viewInfo">查看</button>
    </form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      name: "",
      age: "",
      gender: "",
      phone: "",
    };
  },
  methods: {
    async updateInfo() {
      try {
        const response = await axios.put("http://localhost:8081/audit/update", {
          username: this.name,
          age: this.age,
          sex: this.gender,
          tel: this.phone,
        }, {
          headers: {
            'Authorization': localStorage.getItem('token'),
          },
        });

        if (response.status === 200) {
          this.$message({
            type: "success",
            message: "个人信息更新成功!",
          });
          this.name = '';
          this.age = '';
          this.gender = '';
          this.phone = '';
        } else {
          this.$message({
            type: "error",
            message: "个人信息更新失败",
          });
        }
      } catch (error) {
        console.error(error);
        this.$message({
          type: "error",
          message: "个人信息更新失败",
        });
      }
    },
    async viewInfo() {
      try {
        const userId = 1; // 从本地存储或其他途径获取对应用户ID
        const response = await axios.get(`http://localhost:8081/audit/search/${userId}`);

        if (response.status === 200) {
          this.name = response.data.data.username;
          this.age = response.data.data.age;
          this.gender = response.data.data.sex;
          this.phone = response.data.data.tel;
        } else {
          this.$message({
            type: "error",
            message: "个人信息获取失败",
          });
        }
      } catch (error) {
        console.error(error);
        this.$message({
          type: "error",
          message: "个人信息获取失败",
        });
      }
    },
  },
};
</script>

<style scoped>
.personal-info {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 50px 0;
}

form {
  display: grid;
  gap: 10px;
}

input[type="text"],
input[type="number"],
input[type="tel"],
select {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 5px;
}

button {
  padding: 5px 10px; /* 减小内边距 */
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  background: #007bff;
  color: #fff;
  transition: background 0.3s;
  white-space: nowrap; /* 防止按钮文本换行 */
}

button:hover {
  background: #0056b3;
}

</style>